<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>交易占比</span>
      </div>
      <el-row>
        <!-- <div
          v-if="showNoData"
          style="text-align: center; line-height: 500px;color: #909399;"
        >暂无数据</div> -->
        <div style="width: 100%;height: 500px;" id="echarts"></div>
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import Echarts from "echarts";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data: any = { p2p: { total_qty: 0 }, central: { total_qty: 0 } };
  protected myChart: any = null;
  protected showNoData: boolean = true;

  @Watch("data", { deep: true, immediate: true })
  private draw() {
    this.$nextTick(() => {
      const {
        p2p: { total_qty },
        central: { total_qty: total_qty_central }
      } = this.data;
      if (!total_qty && !total_qty_central) {
        if (this.myChart) this.myChart.clear();
        this.showNoData = true;
        return;
      }
      this.showNoData = false;
      const element: any = document.getElementById("echarts");
      this.myChart = Echarts.init(element);
      this.myChart.setOption({
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 10,
          left: "center",
          data: ["集中交易", "分布式交易"]
        },
        color: ["#077BE8", "#FFD400"],
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              { value: this.data.p2p.total_qty, name: "集中交易" },
              { value: this.data.central.total_qty, name: "分布式交易" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
      this.myChart.dispatchAction({
        type: "mousemove"
      });
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.size24 {
}
// .cardStyle {
//   .el-card {
//     background: rgba(7, 123, 232, 0.05);
//     .fontStyle {
//       color: #077BE8;
//       font-size: 16px;
//       line-height: 36px;
//     }
//     .numberStyle {
//       font-size: 18px;
//     }
//   }
// }
</style>


